<!doctype html>
<html>
    <head>
        <title>QArt.js Example</title>
        <style>
            body {
                width: 100%;
                padding: 0;
                background-color: #FFFFF6;
            }
            h1, h2 {
                text-align: center;
            }

            input[type=text] {
                display: block;
                width: 380px;
                height: 30px;
                margin: 0 auto;
                font-size: 14pt;
            }

            input[type=number] {
                display: block;
                width: 380px;
                height: 30px;
                margin: 0 auto;
                font-size: 14pt;
            }

            input[type=file] {
                display: block;
                width: 380px;
                height: 30px;
                margin: 0 auto;
            }

            label {
                display: block;
                width: 380px;
                margin: 10px auto;
            }

            .group {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .clear {
                clear: both;
            }
            #qr {
                margin: 5px;
            }
            #image {
                margin: 5px;
            }
        </style>
    </head>

    <body>
        <h1>QAraasdft.js</h1>

        <h2>From</h2>
        <label>
            Value: 
            <input id="value" type="text" value="https://github.com/kciter/qart.js">
        </label>

        <label>
            Version:
            <input id="version" type="number" value="10">
        </label>

        <label>
            <input id="file" type="file">
        </label>

        <label>
            Threshold: <input type="radio" value="threshold" name="filter" checked>
            Color: <input type="radio" value="color" name="filter">
        </label>

        <div class="group">
            <div id="qr"></div>
            <div id="image"><img src="./example.png" width="171"></div>
        </div>
        <h2>To</h2>
        <div class="group">
            <div id="combine"></div>
        </div>

        <script src="../src/qrcode.js"></script>
        <script src="../dist/qart.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                var value = 'https://github.com/kciter/qart.js';
                var filter = 'threshold';
                var imagePath = './example.png';
                var version = 10;
                var imageSize = 75 + (version * 12) - 24;

                var self = this;

                $('#image img').width(imageSize);

                function makeQR() {
                    var qr = qrcode.QRCode(version, 'H');
                    qr.addData(value);
                    qr.make();
                    document.getElementById('qr').innerHTML = qr.createImgTag(3);
                }

                function makeQArt() {
                    new QArt({
                        value: value,
                        imagePath: imagePath,
                        filter: filter,
                        version: version
                    }).make(document.getElementById('combine'));
                }

                function getBase64(file, callback) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        callback(reader.result);
                    };
                }

                $('#value').keyup(function() {
                    value = $(this).val();
                    makeQR();
                    makeQArt();
                });

                $('#version').bind('keyup change click', function() {
                    console.log($('#version').val());
                    version = $('#version').val();
                    imageSize = 75 + (version * 12) - 24;
                    $('#image img').width(imageSize);
                    makeQR();
                    makeQArt();
                });

                $('#file').change(function() {
                    getBase64(this.files[0], function(base64Img) {
                        var regex = /data:(.*);base64,(.*)/gm;
                        var parts = regex.exec(base64Img);
                        imagePath = parts[0];
                        $('#image img').attr('src', imagePath);
                        makeQArt();
                    });
                });

                $('input[type=radio]').click(function() {
                    filter = $(this).val();
                    makeQArt();
                });

                makeQR();
                makeQArt();
            });
        </script>
    <body>
</html>
